<template>
  <div class="search" @keypress.enter="searchstart">
    <img src="../img/seek.png" @click="searchstart" alt="搜索">
    <input :style="{width:inputW}" v-model="value" @input="textChange" placeholder="请输入关键词......" type="text" name="">

  </div>
</template>

<script>
  // 搜索组件
  export default {
    name: 'search',
    props: {
      searchText:{
        type:String,
        default:'',
      },
      inputW:{
        type:String,
        default:'12.8rem'
      }
    },
    data() {
      return {
        name: 'search',
        value:this.searchText
      }
    },
    watch: { //嵌套过深的对象无法监听除非深度监听 耗性能不推荐 不知是否是存在数组的问题 最好发新的整个对象过来
    },
    methods: {
      textChange(){
        // 文本改变
        //console.info('文本改变',this.value)
        this.$emit('update:searchText', this.value)
      },
      searchstart(){
        // 开始搜索
         this.$emit('start', true)
      }
    },
    // computed:{
    // },
    mounted() {
      //组件挂载后
    },
    updated() {
      //数据更新后
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .search {
    width: 14.5rem;
    height: 1.2rem;
    border: 0.05rem solid #cccccc;
    border-radius: 4rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search img {
    width: 0.6rem;
    margin-right: 0.3rem;
  }
  .search input {
    display: inline-block;
    border: 0;
    outline: 0;
    width: 12.8rem;
    height: 1rem;
    font-size: 0.6rem;
  }
</style>
